<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <a style="position: absolute;z-index: 10; left: 10px;top:10px" href="/echarts/lj/index.html"><img src="./images/home.png" width="25" alt="" srcset=""></a>
    <div class="container">
        <div class="header" style="padding: 0">燃气安全隐患情况分析</div>
        <div class="main">
            <div class="left">
                <div class="common-line flex-3">
                    <div class="comon-header">燃气统计(2021)</div>
                    <div class="chart">
                        <ul>
                            <li class="common-line-blue fs14">供气量<span>200万方</span></li>
                            <li class="common-line-blue fs14">销售量<span>200吨</span></li>
                            <li class="common-line-blue fs14">用户量<span>1,319户</span></li>
                            <li class="common-line-blue fs14"> 管网<span>1,324km</span></li>
                        </ul>
                    </div>
                </div>
                <div class="common-line flex-3">
                    <div class="comon-header">燃气公司分类</div>
                    <div class="chart">
                        <div id="echarts_0" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header">燃气用户</div>
                    <div class="chart">
                        <div id="echarts_1" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>

            </div>
            <div class="content flex direction">
                <div class="comon-header" style=" padding-top: 1%;">危险点源分布</div>
                <div class="common-line count-number">
                    <p>危险点源总数</p>
                    <p style="font-size: 30px;margin-top: 5px; color: #ED5454;">25</p>
                </div>
                <div class="flex-8" style="position: relative;">
                    <div class="map" id="map" style="width: 100%;height: 100%;"></div>
                    <ul class="map-legend">

                    </ul>
                </div>
                <div class="common-line flex-2">
                    <div class="comon-header" style=" padding-top: 1%;">供气量</div>
                    <div class="chart">
                        <div id="echarts_3" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="common-line flex-4">
                    <div class="comon-header">危险点源分布情况</div>
                    <div class="chart">
                        <div id="echarts_4" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-2">
                    <div class="comon-header">危险点源类型TOP5</div>
                    <div class="chart">
                        <div id="echarts_5" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header ">管网长度</div>
                    <div class="chart">
                        <div id="echarts_2" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="/echarts/js/jquery.min.js"></script>
<script type="text/javascript" src="/echarts/js/echarts.min.js"></script>
<script type="text/javascript" src="/echarts/js/const.js"></script>
<script src="./js/index.js"></script>

</html>